<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">

    </ex_super_table_page>

    <ex_super_dialog_form ref="detailDialog" v-bind="detail_dialog">
    </ex_super_dialog_form>
    <common_print_dialog_url ref="common_print_dialog_url" :tableModel="[
      {
        key: 'orderType', label: 'label_platform', 'width': 140, 'show-overflow-tooltip': true,
        formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
      },
      { key: 'fileNumber', label: 'label_file_code', 'min-width': 140, },
      {
        key: 'customerName', label: 'label_customer_name', 'width': 140, 'show-overflow-tooltip': true,
        formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode)
      },
      {
        key: 'orderCount', label: 'label_order_count', 'width': 110,
      },
      { key: 'clientId', label: 'label_platform_store', 'width': 140, 'show-overflow-tooltip': true, },
    ]" />
  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';
import common_print_dialog_url from '@/component/print/common_print_dialog_url'

import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'outbound>handover_file_manage'

export default {
  title: 'label_platform_handover_file',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: { common_print_dialog_url, },
  data() {
    return {
      status: "",

      selection: [],
      option: {
        search: {
          model: [
            {
              label: "label_customer", key: "customerId", type: 'common_customer_choose',
            },
            { key: 'orderType', label: 'label_platform', type: "select", enum: 'SrmOrderTypeEnum' },

            { key: 'postingNumber', label: 'label_platform_code', },

            { key: 'fileNumber', label: 'label_file_code', },
            { key: 'clientId', label: 'label_platform_store', },
            {
              label: "label_create_time", key: 'startCreateTime', fold: true, type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const value = data[item.key]
                const limitKey = 'endCreateTime'
                const limitValue = data[limitKey]
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_start_time"
                  attrs={{ type: 'datetime' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue < date.getTime()) : false } }}
                />)
              }

            },
            {
              label: "~", key: 'endCreateTime', fold: true, type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const value = data[item.key]
                const limitKey = 'startCreateTime'
                const limitValue = data[limitKey]
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_end_time"
                  attrs={{ type: 'datetime', 'default-time': '23:59:59' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue > date.getTime()) : false } }}
                />)
              }
            },


          ],
        },
        actionExtra: [
          {
            label: 'label_batch_print', attrs: { type: "primary" }, click: () => {
              if (_.isEmpty(this.selection)) {
                return this.$message.error(this.$tt("tip_please_select_order"))
              }
              this.$refs.common_print_dialog_url.show(this.selection)

            }
          },
        ],

        table: {
          url: "/wms-api/outbound/WmsPlatformDeliveryReceiptRpc/selectListPage.json",

          model: this.init_table_model(),
        },
      },
      detail_dialog: {
        customClass: 'dialog_big',
        detailUrl: "/wms-api/outbound/WmsPlatformDeliveryReceiptRpc/detail.json",

        form: {
          // itemClass: "form_item_default",
          inputClass: "bold",
          // formClass: "form_default_col2 flex_row_wrap",
          model: [
            { header: "label_base_info", },
            {
              grid: [[
                {
                  span: 8,
                  col: {
                    key: 'orderType', label: 'label_platform', formType: "text",
                    formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
                  },
                },
                {
                  span: 8,
                  col: { key: 'fileNumber', label: 'label_file_code', formType: "text", },
                },
                {
                  span: 8,
                  col: { key: 'clientId', label: 'label_platform_store', formType: "text", },
                },
              ],
              [
                {
                  span: 8,
                  col: {
                    key: 'fileName', label: 'label_file_name', render: (h, { data }) => {
                      if (!data.filePath) return
                      return (<a class="a_file_link" target="_blank" href={this.$ex_default_download_url + data.filePath}
                        download={data.fileName}><i class="el-icon-download el-icon--left" />{data.fileName}</a>)
                    }
                  },
                },
                {
                  span: 8,
                  col: {
                    key: 'gmtCreate', label: 'label_create_time', formType: "text",
                    formatter: (r, c, v, i) => this.$dateFormat(v)
                  },
                },
                {
                  span: 8,
                  col: {
                    key: 'orderCount', label: 'label_order_count', formType: "text",
                  },
                },
              ]
              ],
            },

            { key: 'remark', label: 'label_remark', formType: "text", },

            {
              key: 'orderList', formType: "itemTable",
              height: 400,
              model: [
                {
                  key: 'orderNo', label: 'label_platform_code', 'min-width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },
                {
                  key: 'trackNumber', label: 'label_face_track_code', 'min-width': 120, 'show-overflow-tooltip': true,
                  formatter: (r, c, v, i) => v || this.$tt("data_temp_none")
                },


              ],
            },
            // {
            //   key: 'postingNumberList', label: '平台订单号列表',
            //   render: (h, { data }) => {
            //     if (_.isEmpty(data.postingNumberList)) return
            //     return (<div>
            //       {data.postingNumberList.map(it => {
            //         return <div>{it}</div>
            //       })}
            //     </div>)
            //   }
            // },
          ],
        }
      },
    };
  },
  methods: {
    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        {
          key: 'orderType', label: 'label_platform', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
        },
        { key: 'fileNumber', label: 'label_file_code', 'min-width': 140, },
        // { key: 'postingNumberList', label: 'label_platform_code', 'min-width': 140, },
        {
          key: 'customerName', label: 'label_customer_name', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode)
        },
        {
          key: 'orderCount', label: 'label_order_count', 'width': 110,
          // formatter: (r, c, v, i) => v ? v.length : 0
        },
        { key: 'clientId', label: 'label_platform_store', 'width': 140, 'show-overflow-tooltip': true, },

        {
          key: 'fileName', label: 'label_file_name', 'width': 130, render: (h, { row }) => {
            if (!row.filePath) return
            return (<a class="a_file_link" target="_blank" href={this.$ex_default_download_url + row.filePath}
              download={row.fileName}><i class="el-icon-download el-icon--left" />{row.fileName}</a>)
          }
        },
        { key: 'gmtCreate', label: 'label_create_time', width: 140, formatter: (r, c, v, i) => this.$dateFormat(v) },
        { key: 'remark', label: 'label_remark', 'width': 130, 'show-overflow-tooltip': true, },
        {
          type: 'operate', width: 200,
          fixed: 'right',
          operate: [
            {
              label: 'label_print',
              click: (row) => this.$refs.common_print_dialog_url.show([row], { single: true }),
            },
            {
              label: 'label_view_detail', click: (row) => {
                this.$refs.detailDialog.showNew({
                  title: this.$tt('label_handover_file_detail'),
                  params: { id: row.id },
                })
              }
            },
          ]
        },
      ]
    },



  }
};

</script>
<style></style>
